<template>
  <div id="apply-scene">
    <div class="w main">
      <div class="title">适用场景</div>
      <!-- 手风琴 -->
      <div class="accordion">
        <div
          v-for="(item, index) in algoItem.algorithmApplicableScenarioVOList"
          :key="item.scenarioTag"
          class="item"
          :class="[activeIndex === index && 'active', index <= activeIndex ? 'left-radius' : 'right-radius']"
          @click="activeIndex = index"
        >
          <div class="item-name cursor">
            {{ item.scenarioTag }}
          </div>
          <div class="item__content" :style="{ width: `${activeIndex === index ? showItemWidth : 0}px` }">
            <div class="content-name">
              {{ item.scenarioTag }}
            </div>
            <div class="content-des">
              {{ item.scenarioContent }}
            </div>
            <img :src="item.downloadImageUrl" class="content-img" :style="{ left: showItemWidth + 'px' }" draggable="false" />
            <div class="bg"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { inject, Ref, ref } from 'vue'

  import { AlgoItem } from '../index.vue'

  const activeIndex = ref(0)

  const algoItem: Ref<AlgoItem> = inject('algoItem')!

  // 手风琴显示元素的宽度
  const showItemWidth = 1376 - 35 * algoItem.value.algorithmApplicableScenarioVOList.length
</script>

<style lang="less" scoped>
  @import '@/styles/mixins.less';

  #apply-scene {
    .main {
      padding: 60px 0;
      background: url('@/assets/img/algo-service/algo-title-icon.svg') no-repeat;
      background-position: 716px 50px;
      background-size: 68px 64px;

      .title {
        position: relative;
        font-size: 30px;
        text-align: center;
        background: linear-gradient(180deg, rgba(14, 14, 40, 0.95) 0%, rgba(54, 54, 99, 0.95) 100%);
        background-clip: text;
        line-height: 38px;
        -webkit-text-fill-color: transparent;
        .fw500();

        img {
          position: absolute;
          top: -7px;
          left: 50%;
          z-index: 3;
          width: 68px;
          height: 64px;
        }
      }

      .accordion {
        display: flex;
        overflow: hidden;
        margin-top: 56px;
        height: 316px;
        background: #f5f5f5;
        border-radius: 8px;
        box-shadow: 0 2px 12px rgba(132, 148, 182, 0.16);

        .left-radius {
          border-radius: 8px 0 0 8px;
          border-left: 1px solid #d9d9db;
        }

        .right-radius {
          border-radius: 0 8px 8px 0;
          border-right: 1px solid #d9d9db;
        }

        .item {
          display: flex;
          overflow: hidden;
          height: 316px;
          background: #f5f5f5;

          .item-name {
            display: flex;
            align-items: center;
            padding-top: 16px;
            width: 35px;
            font-size: 16px;
            letter-spacing: 2px;
            writing-mode: vertical-rl;
            color: rgba(25, 25, 48, 0.75);
            background: #f5f5f5;
            font-weight: 500;
          }

          .item__content {
            position: relative;
            overflow: hidden;
            width: 0;
            transition: all 0.5s;

            .content-name {
              position: absolute;
              top: 98px;
              left: 120px;
              z-index: 5;
              width: 640px;
              font-size: 24px;
              color: rgba(16, 16, 20, 0.95);
              font-weight: 700;
              line-height: 32px;
            }

            .content-des {
              position: absolute;
              top: 146px;
              left: 120px;
              z-index: 5;
              width: 640px;
              font-size: 16px;
              color: rgba(25, 25, 48, 0.75);
              line-height: 24px;
            }

            .content-img {
              position: absolute;
              top: 0;
              transform: translateX(-100%);
              z-index: 1;
              height: 100%;
            }

            .bg {
              position: absolute;
              top: 0;
              left: 0;
              z-index: 3;
              width: 100%;
              height: 100%;
              background: linear-gradient(90deg, #fff 35.64%, rgba(255, 255, 255, 0.21) 100%);
            }
          }

          &.active {
            .item-name {
              color: #fff;
              background-color: rgba(24, 104, 233, 1);
            }
          }
        }
      }
    }
  }
</style>
